<template>
  <div class="body">
    <div v-if="loadingShow" class="demo-spin-container" :style="{height:offsetheight+'px'}">
      <Spin size="large" fix></Spin>
    </div>
    <div  v-else id="container" :style="{height:offsetheight+'px'}"></div>
  </div>
</template>

<script>
import { findAllGridList, findFocusGroupMapList } from '../../../../api/eventlist'
export default {
  props: {
    pickID: {
      type: String
    },
    pickGrade: {
      type: String
    }
  },
  mounted () {
    // 延迟加载，防止出现AMap not defined
    // setTimeout(() => {
    //   this.initMap()
    //   // this.createHeatMap();
    // }, 1000)
    this.findFocusGroupMapList()
    // this.findAllGridList()
  },
  beforeDestroy () {
    this.map && this.map.destroy()
  },
  data () {
    return {
      offsetheight: document.documentElement.clientHeight - 145,
      loadingShow: true,
      map: null,
      heatmap: null,
      dataList: [],
      gridList: [],
      max: 500
    }
  },
  methods: {
    // 初始化地图，创建地图实例
    initMap () {
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        center: [123.412581, 41.805853],
        zoom: 10
        // mapStyle: 'amap://styles/grey' // 极夜蓝
        // 自定义地图样式：https://lbs.amap.com/dev/mapstyle/index
      })
      // this.createMaker()
      // this.createMassMarks()
      this.createHeatMap()
      // this.createPolygon()
    },
    // 判断浏览区是否支持canvas
    isSupportCanvas () {
      let elem = document.createElement('canvas')
      return !!(elem.getContext && elem.getContext('2d'))
    },
    // 创建热力图
    createHeatMap () {
      if (!this.isSupportCanvas()) {
        return this.$Notice.error({
          title: '地图展示失败！',
          desc: '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。'
        })
      }
      let __this = this
      this.map.plugin(['AMap.Heatmap'], function () {
        // 初始化heatmap对象
        __this.heatmap = new AMap.Heatmap(__this.map, {
          visible: false,
          radius: 25, // 给定半径
          opacity: [0, 0.8]
        })
        // 设置数据集：该数据为北京部分“公园”数据
        __this.heatmap.setDataSet({
          data: __this.dataList,
          max: __this.max
        })
      })
    },
    // 创建标记点
    createMaker () {
      var marker = new AMap.Marker({
        position: new AMap.LngLat(123.412581, 41.805853), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '北京'
      })

      // 将创建的点标记添加到已有的地图实例：
      this.map.add(marker)
    },
    // 创建海量点
    createMassMarks () {
      var styleObjectArr = [
        {
          url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
          // url: 'http://imgdl.tripln.top/webhdfs/v1//_9158739104.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0',
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(9, 9)
        }, {
          url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
          anchor: new AMap.Pixel(4, 4),
          size: new AMap.Size(7, 7)
        }, {
          url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
          anchor: new AMap.Pixel(3, 3),
          size: new AMap.Size(5, 5)
        }
      ]
      // null 防止报错
      var massMarks = new AMap.MassMarks(null, {
        zIndex: 5,
        zooms: [3, 19],
        style: styleObjectArr
      })
      let data = []
      this.dataList.forEach(item => {
        data.push({
          lnglat: [item.lng, item.lat],
          name: 'shenyang',
          id: 1,
          style: 2 // 该数据的样式取值styleObjectArr对应的样式索引
        })
      })
      massMarks.setData(data)
      massMarks.setMap(this.map)
    },
    createPolygon () {
      this.gridList.forEach(item => {
        let a = []
        try {
          a = JSON.parse(item.csc_mapjson)
        } catch (e) {
          console.log(e)
        }
        let path = a
        var polygon = new AMap.Polygon({
          path: path,
          fillColor: '#fff', // 多边形填充颜色
          borderWeight: 2, // 线条宽度，默认为 1
          strokeColor: 'red' // 线条颜色
        })
        this.map.add(polygon)
      })
    },
    // 查询数据
    findFocusGroupMapList () {
      this.loadingShow = true
      let data = {
        id: this.pickID,
        grade: this.pickGrade
      }
      findFocusGroupMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.dataList = ret.data.data
          this.loadingShow = false
          setTimeout(() => {
            this.initMap()
          }, 1000)
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    findAllGridList () {
      findAllGridList().then(ret => {
        if (ret.data.errcode === 0) {
          this.gridList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.msg })
        }
      })
    }
  },
  watch: {
    pickID (val) {
      if (val) {
        this.findFocusGroupMapList()
      }
    },
    pickGrade (val) {
      if (val === '2') {
        this.max = 500
      }
      if (val === '3') {
        this.max = 250
      }
      if (val === '4') {
        this.max = 125
      }
      if (val === '5') {
        this.max = 60
      }
    }
  }
}
</script>

<style lang="less" scoped>
//@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");

#container {
  padding: 0;
  //width: 100%;
  //height: 400px;
}
//.body{
//  margin: -15px;
//}
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
.demo-spin-container{
  display: inline-block;
  width: 100%;
  //height: 400px;
  position: relative;
  //border: 1px solid #eee;
}
</style>
